<template>
	<view class="wrap">
		<u-navbar :title="$t('grsz')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="tom-container">
			<view class="nr">
				<view class="list">
					<view class="list_nr_li" @tap="upload('frontImg')">
						<view class="left"><view class="text1">{{$t('wdtx')}}</view></view>
						<view class="right"><image class="img" :src="userInfo.headPortrait" mode=""></image></view>
					</view>
					<view class="list_nr_li">
						<view class="left"><view class="text1">{{$t('wdnc')}}</view></view>
						<view class="right">
							<view class="text1 active">{{ userInfo.name }}</view>
							<u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="40"></u-icon>
						</view>
					</view>
					<view class="list_nr_li">
						<view class="left">
							<view class="text1">
								{{$t('dlzh')}}
								<u-icon :name="show_acc ? 'yanjing' : 'yanjingbiyan'" custom-prefix="custom-icon" size="28" @tap="account"></u-icon>
							</view>
						</view>
						<view class="right">
							<view class="text1" v-if="!show_acc">{{ userInfo.account | formatMiner }}</view>
							<view class="text1 active2" v-else @tap="Personal_copy(userInfo.account)">{{ userInfo.account }}</view>
							<u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="40"></u-icon>
						</view>
					</view>
					<view class="list_nr_li" @click="toPage('/pages/User/Personal/Certification/Certification')">
						<view class="left"><view class="text1">{{$t('smrz')}}</view></view>
						<view class="right">
							<view class="text1" v-if="userInfo.authenticStatus == 1">{{ $t('wsm') }}</view>
							<view class="text1" v-if="userInfo.authenticStatus == 2">{{ $t('shz') }}</view>
							<view class="text1" v-if="userInfo.authenticStatus == 3">{{ $t('ysm') }}</view>
							<u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="40"></u-icon>
						</view>
					</view>
					<!-- <view class="list_nr_li">
						<view class="left"><view class="text1">绑定手机号</view></view>
						<view class="right">
							<view class="text1 active" v-if="userInfo.whetherPhoneBound">{{ userInfo.phone | formatPhone }}</view>
							<view class="text1" v-else @click="toPage('/pages/User/Personal/toPhone/toPhone')">未绑定</view>
							<u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="40" sty></u-icon>
						</view>
					</view> -->
					<view class="list_nr_li">
						<view class="left"><view class="text1">{{$t('bdyx')}}</view></view>
						<view class="right">
							<view class="text1 active" v-if="userInfo.whetherMailBound">{{ userInfo.email | formatMiner }}</view>
							<view class="text1" v-else @click="toPage('/pages/User/Personal/toMail/toMail')">{{$t('wbd')}}</view>
							<u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="40" sty></u-icon>
						</view>
					</view>
					<view class="list_nr_li" @click="toPage('/pages/User/Personal/TradingCodes/TradingCodes')">
						<view class="left"><view class="text1">{{$t('xgjymm')}}</view></view>
						<view class="right"><u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="40" sty></u-icon></view>
					</view>
					<view class="list_nr_li" @click="toPage('/pages/User/Personal/AccessCode/AccessCode')">
						<view class="left"><view class="text1">{{$t('xgdlmm')}}</view></view>
						<view class="right"><u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="40" sty></u-icon></view>
					</view>
					<view class="list_nr_li" @click="toPage('/pages/User/Personal/Language/index')">
						<view class="left"><view class="text1">{{$t('index.system-language')}}</view></view>
						<view class="right">
							<view class="text1 active">{{ language }}</view>
							<u-icon name="arrow-right" color="#999" custom-prefix="custom-icon" size="40"></u-icon>
						</view>
					</view>
				</view>
				<view class="login"><view class="login_btn" @click="login_btn">{{$t('tcdqzh')}}</view></view>
			</view>
		</view>
		<u-modal :title="$t('tishi')" :confirmText="$t('queding')" :cancelText="$t('quxiao')" v-model="login_show" show-cancel-button :title-style="{ 'font-weight': 'bold', 'font-size': '36rpx' }" @confirm="login_tuchu">
			<view class="pop_login_title">{{$t('sfqdtczh')}}</view>
		</u-modal>
		<helang-compress ref="helangCompress"></helang-compress>
		<tom-pwd v-if="showPwd" @cancel="(showPwd = false), (show_acc = false)" @confirm="confirm"></tom-pwd>
	</view>
</template>

<script>
import helangCompress from '@/components/helang-compress/helang-compress';
import { mapState, mapGetters } from 'vuex';
export default {
	data() {
		return {
			login_show: false,
			frontImg: '',
			show_acc: false,
			showPwd: false,
			language:''
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	filters: {
		formStatus(val) {
			// if (val == 1) return this.$t('wsm');
			// if (val == 2) return this.$t('shz');
			// if (val == 3) return this.$t('ysm');
		},
		formatPhone(val) {
			if (!val) return '-';
			return val.substr(0, 3) + '****' + val.substr(7);
		},
		formatMiner(val) {
			if (!val) return '-';
			return val.substr(0, 2) + '****' + val.substr(val.length - 6);
		}
	},
	onShow() {
		let local = uni.getLocale()
		if(local == 'zh-Hans'){
			this.language = '简体中文';
		}else if(local == 'zh-Hant'){
			this.language = '繁體中文';
		}else if(local == 'en'){
			this.language = 'English';
		}else{
			this.language = 'English';
		}
	},
	methods: {
		Personal_copy(e){
			this.$utils.copy(e)
		},
		// 上传头像
		upload(type) {
			if (this.sts == 2 || this.sts == 1) return;
			let that = this;
			uni.chooseImage({
				count: 1,
				success(res) {
					that.$utils.loading(that.$t('zzscz'));
					that.$refs.helangCompress
						.compress({
							src: res.tempFilePaths[0],
							maxSize: 750,
							fileType: 'jpg',
							quality: 0.85,
							minSize: 500 //最小压缩尺寸，图片尺寸小于该时值不压缩，非H5平台有效。若需要忽略该设置，可设置为一个极小的值，比如负数。
						})
						.then(async res => {
							// 压缩成功回调
							// console.log(res)
							that[type] = await that.$utils.upload(res);
							that.$api.userApi
								.updateHeadPortrait({
									headPortraitLink: that[type].fileUrl
								})
								.then(res => {
									that.$api.userApi.getMyAssets().then(res => {
										that.$store.commit('updateUserInfo', res.data);
										that.$utils.toast(that.$t('xgcg'));
									});
								})
								.catch(res => {
									that.$utils.toast(that.$t('xgsb'));
								});
							console.log(that[type]);
						})
						.catch(err => {
							that.$utils.toast(that.$t('tpyssb'));
							// 压缩失败回调
							console.log(err);
						});
				}
			});
		},
		login_btn() {
			this.login_show = true;
		},
		login_tuchu() {
			uni.reLaunch({
				url: '/pages/Login/Login'
			});
		},
		toPage(link) {
			uni.navigateTo({
				url: link
			});
		},
		account() {
			if (this.show_acc) {
				this.show_acc = false;
			} else {
				this.showPwd = true;
			}
		},
		confirm(e) {
			this.showPwd = false;
			uni.showLoading({
				mask: true,
				title: this.$t('loading.title')
			});
			this.$api.loginApi
				.verificationTransferPassword({
					transferPassword: e
				})
				.then(res => {
					this.show_acc = true;
					uni.hideLoading();
				})
				.catch(res => {
					uni.hideLoading();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.tom-container {
	padding-top: 50rpx;
	.nr {
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		background-image: url('/static/new_images/showPopup.png');
		background-position: left bottom;
		background-repeat: no-repeat;
		background-size: 100% 800rpx;
	}
}
.list {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.list_nr_li {
		color: $tom-text-color;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx $nr-padd;
		border-bottom: 2rpx solid $page-bg;
		.left {
			.text1 {
				font-size: 28rpx;
				font-weight: bold;
				.u-icon {
					margin-left: 10rpx;
					position: relative;
					top: 4rpx;
				}
			}
		}
		.right {
			display: flex;
			align-items: center;
			.text1 {
				font-size: 24rpx;
				color: $tom-text-sub-color;
				margin-top: -2rpx;
			}
			.active {
				color: $tom-text-color;
			}
			.active2 {
				color: $text-color;
			}
			.img {
				width: 50rpx;
				height: 50rpx;
				border-radius: 8rpx;
			}
			.u-icon {
				margin-right: -10rpx;
			}
		}
	}
}
</style>
